<template>
	<view :style="bgStyle" :class="['page-app', customClass]" >
		<!-- 修改后的动态导航栏 -->
		<view 
		  :class="['nav-header fl', navClass]" 
		  :style="{ 
		    height: navStyle.height,
			background : navBgcolor,
		    paddingTop: navStyle.paddingTop,
		    color: titleColor 
		  }"
		>
			<view v-if="showNav" class="fl" >
				<uv-icon v-if="showBack" name="arrow-left" color="#333333" size="24" @click="handleBack"></uv-icon>
				<text>{{ title }}</text>
			</view>
			<slot name="navHeader" v-else></slot>
		</view>
		<!-- 页面内容 --> 
		<view class="page-content" :style="{height: 'calc(100vh - '+ (parseInt(navStyle.height) + parseInt(navStyle.paddingTop) + 70 ) + 'px)' }"> 
			<view v-if="isLoading">
				<LoadingPage />
			</view>
			<view v-else :style="{paddingTop: (parseInt(navStyle.height) + parseInt(navStyle.paddingTop) ) + 'px' }">
				<slot></slot>
			</view>
		</view>
		<!-- <view class="foot-tips">版本：{{version}}</view> -->
		<!-- 底部TabBar -->
		<TabBar 
		  v-if="isTabbar"
		  :path="path"
		  :config="dynamicTabConfig"
		  @onTab="handleTabSwitch"
		/>
	</view>
</template>

<script setup>
	import {
		version
	} from '@/config.js'
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		useStore
	} from '@/ya/store';
	import {
		onLoad,
		onShareAppMessage,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
	import LoadingPage from '@/components/LoadingPage.vue';
	import TabBar from '@/components/TabBar.vue';
	// 加载组件
	const LoadingComponent = {
		render() {
			return h('view', {
				class: 'loading'
			}, '加载中...');
		}
	};
	// 错误组件
	const ErrorComponent = {
		render() {
			return h('view', {
				class: 'error'
			}, '模块加载失败');
		}
	};
	const userStore = useStore('user');
	const appConfigStore = useStore('appConfig');
	const props = defineProps({
		title: String,
		customClass: {
			type: String,
			default: ''
		},
		navClass: {
			type: String,
			default: ''
		},
		navBgcolor: {
			type: String,
			default: '#ffffff'
		},
		bgStyle: {
			type: Object,
			default: () => ({
				backgroundColor: '#ffffff'
			})
		},
		titleColor: {
			type: String,
			default: '#000000'
		},
		isTabbar: {
			type: Boolean,
			default: true
		},
		showNav: {
			type: Boolean,
			default: true
		},
		showShare: {
			type: Boolean,
			default: true
		},
		path:{
			type: String,
			default: ''
		},
		shareInfo: {
			type: Object,
			default: () => ({
				shareTitle: '停车地图引导',
				sharePath: '/pages/login'
			})
		}
	});

	// 动态加载页面
	const dynamicTabConfig = computed(() => {
		return appConfigStore.dynamicTabConfig.map(item => ({
			...item,
			activeColor: '#19C6AD'
		}));
	});
	// 自动判断是否显示返回按钮
	const showBack = computed(() => {
	  const pages = getCurrentPages()
	  return pages.length > 1
	})
	
	// 返回操作
	const handleBack = () => {
	  uni.navigateBack()
	}
	// 添加加载状态
	const isLoading = ref(true);
	const loadError = ref(false);
	const activeItem = ref(null);
	const initBefore = () => {
		if(props.isTabbar){
			console.log('initBefore',dynamicTabConfig.value)
			if (dynamicTabConfig.value.length > 0) {
				activeItem.value = dynamicTabConfig.value[0]
			}
		}; //无tab页面跳出逻辑处理
		isLoading.value = false;
	};
	// 先初始化
	initBefore();
	const handleTabSwitch = (path) => {
	  isLoading.value = true; // 重置加载状态
	  const index = dynamicTabConfig.value.findIndex(tab => tab.pagePath === path);
	  console.log('handleTabSwitch', path);
	  if (index !== -1) {
		activeItem.value = dynamicTabConfig.value[index];
		isLoading.value = false;
		uni.redirectTo({
			url: path
		});
	  }
	};
	// 处理返回参数
	onShow(() => {
		if (userStore.currentPageParams) {
			const {
				path,
				params
			} = userStore.currentPageParams;
			console.log('收到返回参数:', params);
			// 这里添加具体参数处理逻辑
			// 处理完成后清空参数
			userStore.currentPageParams = null;
		}
	});
	// 微信分享配置
	// #ifdef MP-WEIXIN
	onShareAppMessage(() => ({
		title: props.shareInfo.shareTitle,
		path: props.shareInfo.sharePath
	}));
	// #endif

	// 新增响应式数据
	const navStyle = ref({
	  height: '100rpx',
	  paddingTop: '30rpx'
	});

	// 获取导航栏高度
	const getNavBarHeight = () => {
	  const windowInfo = uni.getWindowInfo();
	  let statusBarHeight = windowInfo.statusBarHeight || 20;
	  
	  // #ifdef MP-WEIXIN
	  const menuRect = uni.getMenuButtonBoundingClientRect();
	  if (menuRect) {
	    const gap = menuRect.top - statusBarHeight;
	    navStyle.value = {
	      height: `${menuRect.height + gap * 2}px`,
	      paddingTop: `${statusBarHeight}px`
	    };
	    return;
	  }
	  // #endif
	  
	  // 获取设备基础信息
	  const deviceInfo = uni.getDeviceInfo();
	  navStyle.value = {
	    height: `${statusBarHeight + 44}px`,
	    paddingTop: `${statusBarHeight}px`
	  };
	};

	onMounted(() => {
	  getNavBarHeight();
	});
</script>

<style lang="scss">
	.page-app {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.nav-header {
			height: 100rpx;
			padding-top: 30rpx;
			text-align: left;
			text-indent: 20px;
			font-size: 36rpx;
			font-weight: bold;
			background: #fff;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0px;
			left: 0px;
			z-index: 999;
			width: 100%;
		}

		.page-content {
			flex: 1;
			// background-color: transparent;
			background-color: #f5f5f5;
		}
	}

	.foot-tips {
		padding: 10px 0px;
		width: 100vw;
		text-align: center;
		font-size: 12px;
		color: #999999;
		letter-spacing: 3px;
		position: absolute;
		bottom: 0px;
		z-index: 1;
		opacity: 0.5;
	}
</style>